<script setup lang="ts">
import {v4 as generateUuidV4} from 'uuid';
import {useCopy} from '@/composable/copy';

const count = ref(5);
const active = ref(false);
const uuids = ref("");
const uuidsTemp1 = ref("");
const uuidsTemp2 = ref("");
const {copy} = useCopy({source: uuids, text: '复制成功'});

// 生成UUID
function generateUUID() {
  return Array.from({length: count.value}, (_ignored, index) => {
    return generateUuidV4();
  }).join('\n')
}

// 设置UUID
function setUUID(){
  uuids.value = active.value ? uuidsTemp1.value : uuidsTemp2.value;
}

// 刷新UUID
function refreshUUID() {
  const uuid = generateUUID()
  uuidsTemp1.value = uuid.replaceAll("-", "");
  uuidsTemp2.value = uuid;
  setUUID()
}
refreshUUID()
</script>

<template>
  <div>
    <div mb-2 flex items-center>
      <span w-100px>数量： </span>
      <n-input-number v-model:value="count" flex-1 :min="1" :max="50" placeholder="UUID生成数量" :on-update="refreshUUID()"/>
    </div>
    <div mb-2 flex items-center>
      <span w-100px>去除横线： </span>
      <n-space flex-1>
        <n-switch v-model:value="active" @click="setUUID()">
          <template #checked>
            是
          </template>
          <template #unchecked>
            否
          </template>
        </n-switch>
      </n-space>
    </div>


    <c-input-text
        style="text-align: center; font-family: monospace"
        :value="uuids"
        multiline
        placeholder="uuids"
        autosize
        rows="1"
        readonly
        raw-text
        monospace
        my-3
        class="uuid-display"
    />

    <div flex justify-center gap-3>
      <c-button autofocus @click="copy()">
        复制
      </c-button>
      <c-button @click="refreshUUID()">
        刷新
      </c-button>
    </div>
  </div>
</template>

<style scoped lang="less">
::v-deep(.uuid-display) {
  textarea {
    text-align: center;
  }
}
</style>
